<!DOCTYPE HTML>
<html lang="pt_br">
<head>
<meta charset="utf-8">
<title>Testando Google Maps</title>
<script type="text/javascript" src="https://maps.google.com.br/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/maps.js"></script>

<style type="text/css">
html { 
    height: 100% 
}
   
body {
      height: 100%; 
    margin: 0px; 
    padding: 0px 
     
}
#mapa { 
  height: 100%;
  float:right;
  width:70%;
}
 
#caminho{
  float:left;
  width:25%;
  height:10%;      
   }
</style>

 
</head>
<header id="cabecalho">
  <h2>Experimentos com Google Maps</h2>
</header>
<body onload="initialize()">
<form>
<img src="images/A.png" width="24" height="38">&nbsp;De.:<input type="text" name="origem" id="origem" size="45" class="dao.DaoPontos">
<br>
<img src="images/B.png" width="24" height="38">&nbsp;Para.:<input type="text" name="origem" id="destino" size="45"><br>
<input type="button" value="Como chegar" onClick="calculaRota();">
</form>
<div id="caminho"></div>
<div id="mapa"></div>
 
 
</body>
</html>